<template>
<div class="ww">
    <h1>年龄分类</h1>
    <input v-model="age" type="number" placeholder="输入你的年龄" />
    <h4>年龄分类: {{ ageType }}</h4>
</div>
</template>

<script setup>
import { ref, watch } from 'vue'

const age = ref(0)
const ageType = ref('')

//侦听 age 的变化
watch(age, (newAge)=>{
    if(newAge < 0){
        ageType.value = '无效年龄'
    }else if (newAge < 7){
        ageType.value = '幼儿'
    }else if (newAge < 13){
        ageType.value = '儿童'
    }else if (newAge < 18){
        ageType.value = '青少年'
    }else if (newAge < 1000){
        ageType.value = '成年人'
    }else {
        ageType.value = '天山童姥'
    }
})

</script>

<style scoped>
.ww{
    background-color: rgb(154, 227, 232);
    padding: 15px;
}
</style>